import 'package:flutter/material.dart';
import 'package:flutter_sample/src/custom/scroller/timeline_model.dart';
import 'package:intl/intl.dart';

import 'timeline_chart.dart';


class HorizontalSliderDemo extends StatelessWidget {
  HorizontalSliderDemo({super.key});

  // 自定义绘制内容（示例：多个彩色方块）
  void _paintContent(Canvas canvas, Size size) {
    const itemCount = 10;
    final itemWidth = size.width / itemCount;
    final itemHeight = size.height;

    for (int i = 0; i < itemCount; i++) {
      // 随机颜色
      final color = Color.fromARGB(
        255,
        100 + i * 15,
        150 + i * 10,
        200 + i * 5,
      );

      // 绘制方块
      canvas.drawRect(
        Rect.fromLTWH(
          i * itemWidth,
          0,
          itemWidth - 2, // 留2px间隙
          itemHeight,
        ),
        Paint()..color = color,
      );

      // 绘制序号文本
      final textPainter = TextPainter(
        text: TextSpan(
          text: '${i + 1}',
          style: const TextStyle(color: Colors.white, fontSize: 20),
        ),
      );
      textPainter.layout();
      textPainter.paint(
        canvas,
        Offset(
          i * itemWidth + (itemWidth - textPainter.width) / 2,
          (itemHeight - textPainter.height) / 2,
        ),
      );
    }
  }

  void callBack(bool show, TimeLineModel? model) {
    print(show);
  }

  final dateFormat = DateFormat("yyyy-MM-dd HH:mm:ss");

  @override
  Widget build(BuildContext context) {
    var start = DateTime.now().subtract(Duration(days: 200));
    var startDateTime = DateTime(start.year,start.month, start.day, 0, 0 ,0 ,0 ,0 );
    print(dateFormat.format(startDateTime));
    var endDateTime = DateTime(DateTime.now().year,DateTime.now().month,DateTime.now().day,23,59,59,0, 0);
    print(dateFormat.format(endDateTime));

    List<TimeLineModel> models = [];
    TimeLineModel model1 = TimeLineModel(type: 1, startTime: DateTime.parse("2025-09-06 12:25:23"), endTime: DateTime.parse("2025-09-06 13:25:23"));
    //models.add(model1);

    TimeLineModel model2 = TimeLineModel(type: 1, startTime: DateTime.parse("2025-09-07 12:25:23"), endTime: DateTime.parse("2025-09-07 14:25:23"));
    //models.add(model2);

    TimeLineModel model3 = TimeLineModel(type: 1, startTime: DateTime.parse("2025-09-09 23:25:23"), endTime: DateTime.parse("2025-09-10 00:25:23"));
    models.add(model3);


    return Scaffold(
      appBar: AppBar(title: const Text('左右滑动组件示例')),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('左右滑动查看更多内容：'),
            const SizedBox(height: 20),
            Container(
              width: double.infinity,
              height: 180,
              child: Stack(
                alignment: AlignmentDirectional.topCenter,
                children: [
                  TimeLineChart(
                    startDateTime: startDateTime,
                    endDateTime: endDateTime,
                    timeType: 24,
                    timeLines: models,
                    visibleWidth: MediaQuery.of(context).size.width, // 可视宽度
                    contentWidth: MediaQuery.of(context).size.width + 1000, // 内容总宽度（可滑动区域）
                    height: 160, // 高度
                    callBack: callBack, // 自定义绘制逻辑
                  ),
                  Positioned(child: Container(width: 1,height: 160,color: Colors.black,)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}